
<template>
  <div class="gongyingshangshangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>供应商商品</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <!-- 1 -->
          <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div>
              <img src="../../../static/img/gongying4.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>供应商产品</div>
          </div>
          <div class="flex">
            <div
              style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px; margin-right: 20px; padding-left: 20px;"
              class="flexc"
            >
              <div class="flexbc">
                <div>
                  <img
                    src="../../../static/img/gongying2.png"
                    style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"
                  />
                </div>
                <div>
                  <div
                    style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;"
                  >{{total}}</div>
                  <div style="color: rgb(120, 125, 133); font-size: 14px;">商品总数</div>
                </div>
              </div>
            </div>
            <div
              style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px; margin-right: 20px;  padding-left: 20px; "
              class="flexc"
            >
              <div class="flexbc">
                <div>
                  <img
                    src="../../../static/img/gongying3.png"
                    style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"
                  />
                </div>
                <div>
                  <div
                    style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;"
                  >{{total2}}</div>
                  <div style="color: rgb(120, 125, 133); font-size: 14px;">已上架商品数</div>
                </div>
              </div>
            </div>
            <div
              style=" height: 120px;background: rgb(255, 255, 255); border-radius: 20px;  padding:0 20px;min-width:500px "
              class="flexc"
            >
              <div class="flexbc">
                <div>
                  <img
                    src="../../../static/img/gengxin.png"
                    style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"
                  />
                </div>
                <div>
                  <div class="flexc" style=" margin-bottom: 15px;">
                    <div
                      @click="tongbu"
                      style=" border-radius: 20.5px; cursor: pointer; padding: 0 30px; height: 41px; line-height: 41px; color: rgb(0, 90, 255); text-align: center; background: rgb(228, 237, 255);"
                    >同步敢探号商品</div>
                    <div
                      style="color: rgb(116, 116, 116); margin-left: 20px;"
                      v-if="tongbujilu.status == 1"
                    >同步中...</div>
                    <div style="margin-left: 20px;display:flex">
                      定时同步：
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="系统将于每日12时及下午18时自动同步2次"
                        placement="left"
                      >
                        <div class="crice_container">?</div>
                      </el-tooltip>
                      <el-switch
                        style="margin-left:15px;margin-top:2px"
                        active-color="#005aff"
                        inactive-color="#cccccc"
                        :active-value="1"
                        :inactive-value="0"
                        v-model="configTime.auto_sync"
                        @change="(value)=>setConfig(value)"
                      ></el-switch>
                    </div>
                  </div>

                  <div
                    style="color: rgb(120, 125, 133); font-size: 14px;"
                    v-if="tongbujilu"
                  >上次同步时间：{{tongbujilu.created_at}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 3 -->
          <div style="padding: 38px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div>
              <img
                src="../../../static/img/gongyingshang1.png"
                style="width: 22px; margin-right: 10px;"
              />
            </div>
            <div>供应商检索</div>
          </div>
          <!-- 4 -->
          <div
            style="
              background: rgb(255, 255, 255);
              border-radius: 20px;
              padding: 20px;
            "
            class="flexb"
          >
            <div class="flex">
              <div>
                <div style="margin-bottom: 10px">商品名称</div>
                <div>
                  <el-input
                    v-model="search.title"
                    style="width: 140px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px">商品编码</div>
                <div>
                  <el-input
                    v-model="search.fetch_code"
                    style="width: 140px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px">佣金区间</div>
                <div class="flexc">
                  <div>
                    <el-input
                      v-model="search.commission_start"
                      style="width: 140px; margin-right: 10px"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                  <div style="color: rgb(175, 179, 188)">~</div>
                  <div>
                    <el-input
                      v-model="search.commission_end"
                      style="
                        width: 140px;
                        margin-left: 10px;
                        margin-right: 30px;
                      "
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px">卖点</div>
                <div>
                  <el-input
                    v-model="search.selling_point"
                    style="width: 140px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>

              <div style="margin-right: 30px">
                <div style="margin-bottom: 10px">&nbsp;</div>
                <div>
                  <el-button type="primary" round icon="el-icon-search" @click="sousuo">检索</el-button>
                </div>
              </div>
              <div v-if="search.order == 1" style="cursor: pointer">
                <div style="margin-bottom: 10px">&nbsp;</div>
                <div
                  class="flexc sortBtn"
                  style="
                    line-height: 41px;
                    color: #005aff;
                    font-size: 12px;
                    cursor: pointer;
                  "
                >
                  倒序排列
                  <i class="el-icon-sort" style="margin-left: 10px" @click="changorder(0)"></i>
                </div>
              </div>
              <div v-if="search.order == 0 || search.order == ''" style="cursor: pointer">
                <div style="margin-bottom: 10px">&nbsp;</div>
                <div
                  class="flexc sortBtn"
                  style="
                    line-height: 41px;
                    color: #005aff;
                    font-size: 12px;
                    cursor: pointer;
                  "
                >
                  正序排列
                  <i class="el-icon-sort" style="margin-left: 10px" @click="changorder(1)"></i>
                </div>
              </div>
            </div>
            <!-- <div style="margin-right: 30px;">
                <div style="margin-bottom: 10px;">自动上架</div>
                <div><el-switch v-model="zidong" style="width: 85px; height: 41px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);"></el-switch></div>
            </div>-->
          </div>
          <!-- 5 -->
          <div
            class="flex"
            style="margin-top: 20px; "
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <!-- :class="((index+1)%3 == 0 && widthss)?'shi3':'bushi3'" -->
            <div
              style="width: 500px; min-height: 230px; padding: 20px; margin-bottom: 20px; background: rgb(255, 255, 255); border-radius: 20px; margin-right: 15px;"
              v-for="(item,index) in list"
              :key="index"
            >
              <div class="flexbc">
                <div class="flex">
                  <div
                    style="color: rgb(2, 12, 29); font-size: 12px; margin-right: 20px;"
                  >供应商:{{item.supplier_name}}</div>
                  <div style="color: rgb(212, 215, 222); font-size: 12px;">发布时间: {{item.created_at}}</div>
                </div>
                <div class="flex">
                  <div
                    style="background: rgb(254, 61, 61); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;"
                    class="flexcc"
                    v-if="item.is_main == 1"
                  >主推</div>
                  <div
                    style="background: rgb(0, 90, 255); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px; margin-left: 10px;"
                    class="flexcc"
                    v-if="item.is_top"
                  >置顶</div>
                </div>
              </div>
              <div class="flex" style="margin-top: 20px;">
                <div>
                  <img
                    :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'"
                    style="width: 100px; height: 100px; border-radius: 10px;"
                  />
                </div>
                <div style="margin-left: 20px; width: 330px;">
                  <div
                    style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; line-height: 19px; margin-bottom: 10px;"
                  >{{item.title}}</div>
                  <div
                    style="color: #999; font-size: 14px; margin-bottom: 10px;"
                  >商品编码: {{item.fetch_code}}</div>

                  <div class="flex">
                    <div
                      style="color: rgb(254, 61, 61); background: rgb(255, 242, 242);margin-bottom: 5px"
                      class="flexcc xt"
                      v-if="item.selling_point.length > 0 && item.selling_point[0]"
                    >{{item.selling_point[0]}}</div>
                    <div
                      style="color: rgb(31, 159, 48); background: rgb(229, 255, 217);margin-bottom: 5px"
                      class="flexcc xt"
                      v-if="item.selling_point.length > 1 && item.selling_point[1]"
                    >{{item.selling_point[1]}}</div>
                    <div
                      style="color: rgb(189, 55, 255); background: rgb(251, 239, 255);margin-bottom: 5px"
                      class="flexcc xt"
                      v-if="item.selling_point.length > 2 && item.selling_point[2]"
                    >{{item.selling_point[2]}}</div>
                    <div
                      style="color: rgb(55, 175, 255); background: rgb(239, 250, 255);margin-bottom: 5px"
                      class="flexcc xt"
                      v-if="item.selling_point.length > 3 && item.selling_point[3]"
                    >{{item.selling_point[3]}}</div>
                  </div>
                </div>
              </div>
              <div
                style="margin: 10px 0 0 0; font-size: 12px; color: rgb(120, 125, 133);"
                class="flexbc"
              >
                <div style="width: 300px;">
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">
                      <span>佣金规则：{{item.p_rules}}</span>
                      <span
                        v-if="item.p_active_commission != 0 && item.p_active_commission != null"
                      >已激活，佣金{{item.p_active_commission}}元.</span>
                      <span
                        v-if="item.p_first_recharge_one_commission != 0 && item.p_first_recharge_one_commission != null"
                      >
                        首充大于{{item.p_first_recharge_one}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_first_recharge_one_commission}}</span>元
                      </span>
                      <span
                        v-if="item.p_first_recharge_two_commission != 0 && item.p_first_recharge_two_commission != null"
                      >
                        或者首充大于{{item.p_first_recharge_two}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_first_recharge_two_commission}}</span>元.
                      </span>
                      <span
                        v-if="item.p_recharge_amount_one_commission != 0 && item.p_recharge_amount_one_commission != null"
                      >
                        累计充值大于{{item.p_recharge_amount_one}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_recharge_amount_one_commission}}</span>元
                      </span>
                      <span
                        v-if="item.p_recharge_amount_two_commission != 0 && item.p_recharge_amount_two_commission != null"
                      >
                        且累计充值大于{{item.p_recharge_amount_two}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_recharge_amount_two_commission}}</span>元.
                      </span>
                    </div>
                    <div
                      style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"
                    >
                      <span>佣金规则：{{item.p_rules}}</span>
                      <span
                        v-if="item.p_active_commission != 0 && item.p_active_commission != null"
                      >已激活，佣金{{item.p_active_commission}}元.</span>
                      <span
                        v-if="item.p_first_recharge_one_commission != 0 && item.p_first_recharge_one_commission != null"
                      >
                        首充大于{{item.p_first_recharge_one}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_first_recharge_one_commission}}</span>元
                      </span>
                      <span
                        v-if="item.p_first_recharge_two_commission != 0 && item.p_first_recharge_two_commission != null"
                      >
                        或者首充大于{{item.p_first_recharge_two}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_first_recharge_two_commission}}</span>元.
                      </span>
                      <span
                        v-if="item.p_recharge_amount_one_commission != 0 && item.p_recharge_amount_one_commission != null"
                      >
                        累计充值大于{{item.p_recharge_amount_one}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_recharge_amount_one_commission}}</span>元
                      </span>
                      <span
                        v-if="item.p_recharge_amount_two_commission != 0 && item.p_recharge_amount_two_commission != null"
                      >
                        且累计充值大于{{item.p_recharge_amount_two}}元，佣金
                        <span
                          style="color: #f00;"
                        >{{item.p_recharge_amount_two_commission}}</span>元.
                      </span>
                    </div>
                  </el-tooltip>
                  <!-- <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">
                          <span>我给下游的佣金规则：{{item.c_rules}} </span>
                          <span v-if="item.c_active_commission != 0">已激活，佣金{{item.c_active_commission}}元.</span>
                          <span v-if="item.c_first_recharge_one_commission != 0">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.c_first_recharge_two_commission != 0">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.c_recharge_amount_one_commission != 0">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.c_recharge_amount_two_commission != 0">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                        <div style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
                          <span>我给下游的佣金规则：{{item.c_rules}} </span>
                          <span v-if="item.c_active_commission != 0">已激活，佣金{{item.c_active_commission}}元.</span>
                          <span v-if="item.c_first_recharge_one_commission != 0">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.c_first_recharge_two_commission != 0">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.c_recharge_amount_one_commission != 0">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.c_recharge_amount_two_commission != 0">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                  </el-tooltip>-->
                </div>
                <div
                  @click="shangjia(item,100)"
                  v-if="item.status == 0"
                  style="background: rgb(228, 237, 255); cursor: pointer; border-radius: 16px;width: 100px; height: 32px; font-size: 14px; color: rgb(0, 90, 255);"
                  class="flexcc"
                >上架</div>
                <div
                  @click="shangjia(item,0)"
                  v-if="item.status == 100"
                  style="background: rgb(228, 237, 255); cursor: pointer; border-radius: 16px;width: 100px; height: 32px; font-size: 14px; color: rgb(0, 90, 255);"
                  class="flexcc"
                >下架</div>
              </div>
              <div style="color: rgb(254, 61, 61); font-size: 12px; margin-bottom: 0.1rem; ">
                <el-tooltip class="item" effect="dark" :content="item.points" placement="top-start">
                  <div
                    style="width:100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
                  >{{item.points}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
          <el-pagination
            style="text-align: right; padding: 20px;"
            background
            layout="prev,pager,next,total,jumper"
            :current-page="search.page"
            @current-change="fanye"
            :page-size="search.page_size"
            :total="total"
          ></el-pagination>
          <!-- <footers></footers> -->
        </div>
      </div>
    </div>

    <el-dialog
      title="推广二维码"
      :visible.sync="erweima_log"
      width="440px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="erweima_log = false">关闭</el-button>
        <el-button type="primary" @click="xiazai">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置排序"
      :visible.sync="paixu_log"
      width="440px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div>
        <el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog>

    <div
      v-if="shoujiban"
      style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb;padding-bottom: 1rem;"
    >
      <div class="tabs_container">
        <div @click="choosetab('one')" :class="activeName === 'one' ? 'wares' : 'initial'">供应商商品</div>
        <div
          @click="choosetab('two')"
          :class="activeName === 'two' ? 'wares' : 'initial'"
          style="margin-left:30px"
        >在售商品</div>
      </div>
      <div class="search_container" v-show="activeName === 'one'">
       <div class="layout_inner">
         <div class="search_box_input">
          <img src="../../../static/appimg/search.png" alt class="search_img" />
          <el-input v-model="search.fetch_title" placeholder="请输入商品名称/编码" class="search_input"></el-input>
          <div @click="sousuo" class="search_btn" icon="el-icon-search">搜索</div>
        </div>
          <div>
          <img src="../../../static/appimg/reaish.png" alt class="clear_img" @click="tongbu" />
          </div>
       </div>
        <div class="commission_container">
          <div style="display:flex;align-items:center" @click="regionCommission">
            <span style="font-size:13px">佣金区间</span>
            <img src="../../../static/appimg/arrowpng.png" alt style="margin-left: 5px;margin-top: 2px;width:8px;height:5px" />
          </div>
          <div style="margin-left:30px">
            <div v-if="search.order == 1">
              <div class="flexc" style="line-height: 41px; color: #787D85; font-size: 13px;" @click="changorder(0)">
                正序排列
                <img src="../../../static/appimg/sorta.png" alt="" style="width:12px;height:12px;margin-left:3px;margin-top:2px;"/>
                <!-- <i
                  class="el-icon-sort"
                  style="margin-left: 5px;font-size:14px"
                  @click="changorder(0)"
                ></i> -->
              </div>
            </div>
            <div v-if="search.order == 0 || search.order == ''">
              <div class="flexc" style="line-height: 41px; color:#787D85; font-size: 13px;" @click="changorder(1)">
                倒序排列
                  <img src="../../../static/appimg/sorta.png" alt="" style="width:12px;height:12px;margin-left:3px;margin-top:2px;"/>
                <!-- <i
                  class="el-icon-sort"
                  style="margin-left: 5px;font-size:14px"
                  @click="changorder(1)"
                ></i> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 0.3rem;" v-show="activeName === 'one'">
        <!-- <div style="padding: 0px 0 0.2rem 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongying4.png" style="width: 0.4rem; margin-right: 0.1rem;"></div>
          <div>供应商产品</div>
        </div>
        <div class="flexbc">
           <div style="width: 3.3rem; background: rgb(255, 255, 255); padding: 0.3rem; border-radius: 0.2rem; margin-right: 0.2rem; padding-left: 0.2rem;" class="flexc">
             <div class="flexbc">
               <div><img src="../../../static/img/gongying2.png" style="width: 0.75rem; height: 0.75rem; border-radius: 0.4rem; margin-right: 0.15rem;"></div>
               <div>
                 <div style="color: rgb(2, 12, 29); font-size: 0.36rem; font-weight: bold; margin-bottom: 5px;">{{total}}</div>
                 <div style="color: rgb(120, 125, 133); font-size: 14px;">商品总数</div>
               </div>
             </div>
           </div>
           <div style="width: 3.3rem; background: rgb(255, 255, 255); padding: 0.3rem; border-radius: 0.2rem;  padding-left: 0.2rem; " class="flexc">
             <div class="flexbc">
               <div><img src="../../../static/img/gongying3.png" style="width: 0.75rem; height: 0.75rem; border-radius: 0.4rem; margin-right: 0.15rem;"></div>
               <div>
                 <div style="color: rgb(2, 12, 29); font-size:  0.36rem; font-weight: bold; margin-bottom: 5px;">{{total2}}</div>
                 <div style="color: rgb(120, 125, 133); font-size: 14px;">已上架商品数</div>
               </div>
             </div>
           </div>
        </div>
        <div style=" background: rgb(255, 255, 255); border-radius: 0.2rem; margin-top: 20px; padding:0.2rem; " class="flexc">
          <div class="flexbc">
            <div><img src="../../../static/img/gengxin.png" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"></div>
            <div>
              <div class="flexc" style=" margin-bottom: 0.1rem;">
                <div @click="tongbu" style=" border-radius: 0.5rem; cursor: pointer; padding:0.2rem 0.5rem;  color: rgb(0, 90, 255); text-align: center; background: rgb(228, 237, 255);">同步敢探号商品</div>
                <div style="color: rgb(116, 116, 116); margin-left: 0.2rem;" v-if="tongbujilu.status == 1">同步中...</div>
              </div>

              <div style="color: rgb(120, 125, 133); font-size: 12px;" v-if="tongbujilu">上次同步时间：{{tongbujilu.created_at}}</div>
            </div>
          </div>
        </div>-->
        <!-- <div style="padding: 0.3rem 0 0.2rem 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongyingshang1.png" style="width: 0.4rem; margin-right: 0.1rem;"></div>
          <div>供应商检索</div>
        </div>
        <div style=" background: rgb(255, 255, 255); border-radius: 0.2rem; padding: 0.2rem; ">

          <div class="flexc" style="justify-content: space-between; margin-bottom: 0.2rem;">
            <div><el-input v-model="search.c_commission_start" style="width: 3rem; " placeholder="最小佣金"></el-input></div>
            <div style="color: color: rgb(175, 179, 188);">~</div>
            <div><el-input v-model="search.c_commission_end" style="width:  3rem; " placeholder="最大佣金"></el-input></div>
          </div>
          <div class="flexbc" style="margin-bottom: 0.2rem;">
            <div><el-input v-model="search.selling_point" style="width: 3rem;" placeholder="请输入卖点"></el-input></div>
          </div>

        </div>-->
        <div class="list">
          <div
            class="flex"
            style="margin-top: 0.2rem;"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <div
              style="width: 6.9rem; padding: 0.2rem; margin-bottom: 0.2rem; background: rgb(255, 255, 255); border-radius: 0.3rem; "
              v-for="(item,index) in list"
              :key="index"
            >
              <div class="flexbc">
                <div>
                    <div style="display: flex;justify-content: space-between;">
                                     <div
                    style="color: rgb(2, 12, 29);  margin-right: 0.2rem;font-size:15px"
                  >供应商:{{item.supplier_name}}</div>
               <div class="flex">
                  <div
                    style="background: rgb(254, 61, 61); border-radius: 4px; padding: 0.05rem 0.2rem;  color: rgb(255, 255, 255); font-size: 12px;margin-right:5px"
                    class="flexcc"
                    v-if="item.is_main == 1"
                  >主推</div>
                  <div
                    style="background: rgb(0, 90, 255); border-radius: 4px; padding: 0.05rem 0.2rem; color: rgb(255, 255, 255); font-size: 12px;"
                    class="flexcc"
                    v-if="item.is_top"
                  >置顶</div>
                </div>
                    </div>
                  <div
                    style="color: rgb(212, 215, 222);margin-top: 0.1rem;margin-bottom: 0.1rem;width:100%;display:flex;justify-content: space-between;"
                  >
                  <div style="width:35%; overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;">商品编码:{{item.fetch_code}}</div>
                  <div style="width:65%;margin-left:0.3rem">发布时间: {{item.created_at}}</div>
                 </div>
                </div>

              </div>
              <div  style="margin-top: 0.2rem;">
                <div  style="display: inline;float: left;margin-right: 0.2rem;">
                  <img
                    :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'"
                    style="width: 90px; height: 90px; border-radius: 0.1rem; margin-bottom: 0.1rem;display: inline;"
                  />
                </div>
                <div style="display: inline;">
                  <div style="color: rgb(2, 12, 29); font-size: 0.27rem; margin-bottom: 0.1rem;">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.title"
                      placement="top-start"
                    >
                      <div style="width:100%;">{{item.title}}</div>
                    </el-tooltip>

                    <div style="color: rgb(254, 61, 61); font-size: 12px; margin-bottom: 0.15rem;margin-top: 0.15rem; ">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.points"
                        placement="top-start"
                      >
                        <div
                          style=" overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width: calc(100% - 120px)"
                        >{{item.points}}</div>
                      </el-tooltip>
                    </div>
                    <div style="display: inline;" >
                      <div
                        style="color: rgb(254, 61, 61); background: rgb(255, 242, 242); margin-bottom: 0.2rem;
                        padding: 0.1rem;border-radius:0.1rem;display: inline-block;
                        "
                        class=" xt"
                        v-if="item.selling_point.length > 0 && item.selling_point[0]"
                      >{{item.selling_point[0]}}</div>
                      <div
                        style="color: rgb(31, 159, 48); background: rgb(229, 255, 217); margin-bottom: 0.2rem;
                        padding: 0.1rem;border-radius:0.1rem;display: inline-block;
                        "
                        class=" xt"
                        v-if="item.selling_point.length > 1 && item.selling_point[1]"
                      >{{item.selling_point[1]}}</div>
                      <div
                        style="color: rgb(189, 55, 255); background: rgb(251, 239, 255); margin-bottom: 0.2rem;
                        padding: 0.1rem;border-radius:0.1rem;display: inline-block;
                        "
                        class=" xt"
                        v-if="item.selling_point.length > 2 && item.selling_point[2]"
                      >{{item.selling_point[2]}}</div>
                      <div
                        style="color: rgb(55, 175, 255); background: rgb(239, 250, 255); margin-bottom: 0.2rem;
                        padding: 0.1rem;border-radius:0.1rem;display: inline-block;
                        "
                        class=" xt"
                        v-if="item.selling_point.length > 3 && item.selling_point[3]"
                      >{{item.selling_point[3]}}</div>
                    </div>
                  </div>
                  <!-- <div style="color: #999; font-size: 14px; margin-bottom: 0.1rem;">商品编码: {{item.fetch_code}}</div> -->
                </div>
                <div style="clear:both"></div>
              </div>

              <div
                class="flex"
                style="justify-content: space-between; margin-top: 0.2rem;align-items: center;"
              >
                <div style="margin: 0px 0 0 0; font-size: 12px; color: rgb(120, 125, 133);">
                  <div class="commission_rules">
                    <span>佣金规则：{{item.p_rules}}</span>
                    <span
                      v-if="item.p_active_commission != 0 && item.p_active_commission != null"
                    >已激活，佣金{{item.p_active_commission}}元.</span>
                    <span
                      v-if="item.p_first_recharge_one_commission != 0 && item.p_first_recharge_one_commission != null"
                    >
                      首充大于{{item.p_first_recharge_one}}元，佣金
                      <span
                        style="color: #f00;"
                      >{{item.p_first_recharge_one_commission}}</span>元
                    </span>
                    <span
                      v-if="item.p_first_recharge_two_commission != 0 && item.p_first_recharge_two_commission != null"
                    >
                      或者首充大于{{item.p_first_recharge_two}}元，佣金
                      <span
                        style="color: #f00;"
                      >{{item.p_first_recharge_two_commission}}</span>元.
                    </span>
                    <span
                      v-if="item.p_recharge_amount_one_commission != 0 && item.p_recharge_amount_one_commission != null"
                    >
                      累计充值大于{{item.p_recharge_amount_one}}元，佣金
                      <span
                        style="color: #f00;"
                      >{{item.p_recharge_amount_one_commission}}</span>元
                    </span>
                    <span
                      v-if="item.p_recharge_amount_two_commission != 0 && item.p_recharge_amount_two_commission != null"
                    >
                      且累计充值大于{{item.p_recharge_amount_two}}元，佣金
                      <span
                        style="color: #f00;"
                      >{{item.p_recharge_amount_two_commission}}</span>元.
                    </span>
                  </div>
                </div>
                <div
                  @click="shangjia(item,100)"
                  v-if="item.status == 0"
                  style="background:#2757FF; cursor: pointer; border-radius: 16px;width: 70px; height: 34px; font-size: 14px; color: white;"
                  class="flexcc"
                >上架</div>
                <div
                  @click="shangjia(item,0)"
                  v-if="item.status == 100"
                  style="background:#2757FF; cursor: pointer; border-radius: 16px;width: 60px; height: 34px; font-size: 14px; color: white;"
                  class="flexcc"
                >下架</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <zaishoushangpin v-if="activeName === 'two'" :hide="true"/>
      <div class="footer_tabs">
        <footerApp />
      </div>
    </div>
    <van-popup
      v-model="isRegion"
      position="bottom"
      :style="{ height: '30%' ,padding:'20px 20px',borderRadius:'20px 20px 0 0'}"
    >
      <div class="commission_interval">
        <div
          @click="isSelectfun(1);"
          class="commission_item"
          :style="{color:isSelect==1?'#2757FF':'#787D85'}"
        >0-50</div>
        <div
          @click="isSelectfun(2)"
          class="commission_item"
          :style="{color:isSelect==2?'#2757FF':'#787D85'}"
        >50-100</div>
        <div
          @click="isSelectfun(3)"
          class="commission_item"
          :style="{color:isSelect==3?'#2757FF':'#787D85'}"
        >100-200</div>
        <div
          @click="isSelectfun(4)"
          class="commission_item"
          :style="{color:isSelect==4?'#2757FF':'#787D85'}"
        >200及以上</div>
      </div>
      <div
        style="display:flex;font-size:12px;margin-top:15px;width:100%;display:flex;justify-content:flex-start;align-items: center;"
      >
        <div>
          <input
            @focus="focusClcik"
            v-model="search.commission_start"
            placeholder="自定义"
            class="commission_input"
          />
        </div>
        <div style="color:#AFB3BC;margin:0 2px">-</div>
        <div>
          <input
            @focus="focusClcik"
            v-model="search.commission_end"
            placeholder="自定义"
            class="commission_input"
            @blur="handleBlur"
          />
        </div>
      </div>
    </van-popup>
    <van-popup
      v-if="shoujiban"
      v-model="isshowmoney"
      round
      position="bottom"
      :style="{ height: '75%',padding:'20px 15px 0 15px'}"
    >
      <div style="display: flex;align-items: center;justify-content: center">
        <span style="font-size:16px">上架佣金设置</span>
        <img
          @click="isshowmoney=false"
          style="width:15px;position: absolute;right: 15px;"
          src="./png/close.png"
        />
      </div>
      <div style="height: calc(100% - 91px);overflow: auto;">
        <div>
          <span class="font-title">商品可见</span>
          <div style="display: flex;gap:11px">
            <div @click="goods_display=1" :class="goods_display==1?'select':'no-select'">仅自己可见</div>
            <div @click="goods_display=0" :class="goods_display==0?'select':'no-select'">全部分销商可见</div>
          </div>
        </div>
        <div>
          <span class="font-title">佣金结算触发方式</span>
          <div style="display: flex;gap:11px;    flex-direction: column;">
            <div @click="changeradio1" :class="radiorg==1?'select':'no-select'">
              <div>人工触发</div>
              <div style="margin-top:10px">人工导入要结算的订单，触发结算</div>
            </div>
            <div @click="changeradio2" :class="radiozd==1?'select':'no-select'">
              <div>自动触发（实时结算）</div>
              <div style="margin-top:10px">系统根据敢探号订单激活状态自动触发结算</div>
              <div style="display: flex;    align-items: center;margin-top: 8px;">
                <span>选择触发状态：</span>
                <van-radio-group v-model="jhstate" direction="horizontal">
                  <van-radio name="1">激活</van-radio>
                  <van-radio name="2">激活且充值</van-radio>
                </van-radio-group>
              </div>
            </div>
          </div>
        </div>
        <div>
          <span class="font-title">佣金结算条件：</span>
          <div>
            <input
              class="term_input"
              v-model="yjtext"
              placeholder="默认填写从敢探号同步过来的"
              style="
            height:64px;
            width: 100%;
            background:#F6F8FB;
            border-radius: 10px;
            border:0;
            padding-left: 20px;
            font-size: 16px;
            "
            />
            <!-- <el-input v-model="yjtext" placeholder="默认填写从敢探号同步过来的"></el-input> -->
            <div
              style="color: #AFB3BC;margin-top: 10px;font-size: 12px;font-weight: 400;"
            >该规则会展示给所有层级的分销商，请避免直接写金额</div>
          </div>
        </div>
        <div style="display: flex;gap:15px;margin-top: 20px;">
          <div class="cancel" @click="isshowmoney = false">取消</div>
          <div class="onOK" @click="suresetyj">确定</div>
        </div>
      </div>
    </van-popup>

    <el-dialog
      v-if="!shoujiban"
      title="上架佣金设置"
      :visible.sync="isshowmoney"
      width="700px"
      :close-on-click-modal="false"
    >
      <div>
        <div class="t_flex_w" style="margin-bottom: 20px;">
          <div class="t_yj_title">商品可见：</div>
          <div>
            <div class="t_flex_w">
              <div class="t_radio_box">
                <el-radio v-model="goods_display" :label="1">仅自己可见</el-radio>
              </div>
              <div class="t_radio_box">
                <el-radio v-model="goods_display" :label="0">全部分销商可见</el-radio>
              </div>
            </div>
          </div>
        </div>
        <div class="t_flex_w">
          <div class="t_yj_title">佣金结算触发方式：</div>
          <div>
            <div class="t_flex_w">
              <div class="t_radio_box">
                <el-radio @change="changeradio1" v-model="radiorg" label="1">人工触发</el-radio>
              </div>
              <div style="color: #B0B0B0;">人工导入要结算的订单，触发结算</div>
            </div>
            <div class="t_flex_w" style="margin-top: 20px;margin-bottom: 20px;">
              <div class="t_radio_box">
                <el-radio @input="changeradio2" v-model="radiozd" label="1">自动触发（实时结算）</el-radio>
              </div>
              <div style="color: #B0B0B0;">系统根据敢探号订单激活状态自动触发结算</div>
            </div>
            <div class="t_flex_w" style="align-items: center;" v-if="radiozd=='1'">
              <div>选择触发状态：</div>
              <el-select v-model="jhstate" placeholder="请选择">
                <el-option label="激活" value="1"></el-option>
                <el-option label="激活且充值" value="2"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="t_flex_w" style="margin-top: 30px;">
          <div class="t_yj_title">佣金结算条件：</div>
          <div>
            <el-input v-model="yjtext" placeholder="默认填写从敢探号同步过来的"></el-input>
            <div style="color: #FF0C0C;margin-top: 10px;font-size: 14px;">该规则会展示给所有层级的分销商，请避免直接写金额</div>
          </div>
        </div>
      </div>
      <div style="text-align: right;margin-top: 30px;">
        <el-button round @click="isshowmoney = false">取 消</el-button>
        <el-button round type="primary" @click="suresetyj">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
import footerApp from "../footerApp.vue";
import zaishoushangpin from "./zaishoushangpin.vue";

export default {
  name: "gongyingshangshangpin",
  components: {
    left,
    top,
    topandleft,
    footers,
    footerApp,
    zaishoushangpin
  },
  data() {
    return {
      activeName: "one",
      all: {},
      isSelect: 0,
      search: {
        page: 1,
        page_size: 20,
        fetch_code: "",
        fetch_title: "",
        status: "",
        title: "",
        selling_point: "",
        order: "",
        commission_start: "",
        commission_end: ""
      },

      list: [],
      total: 0,
      total2: 0,
      dangqianshangpin: "",
      erweima_log: false,
      loading: true,
      paixu_log: false,

      widthss: false,
      shoujiban: false,
      isshowmoney: false,
      radiorg: "",
      radiozd: "",
      jhstate: "",
      yjtext: "",
      goods_display: 0,

      tongbujilu: "",
      configTime: {
        auto_sync: 0
      },
      isRegion: false
    };
  },
  created() {},
  mounted() {
    console.log(window.screen.width);
    if (window.screen.width == 1920) {
      this.widthss = true;
    }
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;
      this.search.page_size = 200;
    }
    this.getlist();
    this.getlist2();
    this.gettongbu();
    this.getSynchronous();
  },
  methods: {
  focusClcik(){
    this.isSelect = 5;
  },
    isSelectfun(val) {
      this.isSelect = val;
      if (this.isSelect == 1) {
        this.search.commission_start = 0;
        this.search.commission_end = 50;
      } else if (this.isSelect == 2) {
        this.search.commission_start = 50;
        this.search.commission_end = 100;
      } else if (this.isSelect == 3) {
        this.search.commission_start = 100;
        this.search.commission_end = 200;
      } else if (this.isSelect == 4) {
        this.search.commission_start = 200;
        this.search.commission_end = "";
      }
      this.isRegion = false;
      this.getlist();
    },
    handleBlur() {
      this.search.page = 1;
      this.isRegion = false;
      this.getlist();
    },
    regionCommission() {
      this.isRegion = true;
      this.search.commission_start = "";
      this.search.commission_end = "";
    },
    clearClick() {
      this.search.commission_start = "";
      this.search.commission_end = "";
      this.commission_start = "";
      this.commission_end = "";
      this.isSelect = 0;
      this.search.fetch_title = "";
      this.search.page = 1;
      this.getlist();
    },
    choosetab: function(val) {
      this.activeName = val;
    },
    // 设置
    setConfig(value) {
      console.log("this.setConfig");
      axios
        .post(`/own/system/page/config/auto/sync?auto_sync=${value}`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("设置成功");
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    // 同步
    getSynchronous() {
      axios.get("/own/system/page/config/get").then(response => {
        if (response.data.msg.code == 0) {
          this.configTime = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    gettongbu: function() {
      axios.get("/own/order-page/sync/log").then(response => {
        if (response.data.msg.code == 0) {
          if (response.data.data) {
            this.tongbujilu = response.data.data;
          }
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    tongbu: function() {
      axios
        .post("/own/order-page/list/sync", { up_log_id: this.tongbujilu.id })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("同步中");
            this.gettongbu();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    shangjia: function(item, val) {
      this.dangqianshangpin = item;
      this.goods_display = this.dangqianshangpin.goods_display;
      if (val == 0) {
        // this.dangqianshangpin.status = val
        axios
          .post("/own/page/put-sale", {
            id: this.dangqianshangpin.id,
            status: 0
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("设置成功");
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        //弹窗
        this.isshowmoney = true;
        this.radiorg = "";
        this.radiozd = "";
        this.jhstate = "";

        var txt0 = "";
        var txt1 = "";
        var txt2 = "";
        var txt3 = "";
        var txt4 = "";
        var txt5 = "";
        if (item.p_rules) {
          txt0 = item.p_rules;
        }
        if (item.p_active_commission != 0 && item.p_active_commission != null) {
          txt1 = "已激活，佣金" + item.p_active_commission + "元.";
        }
        if (
          item.p_first_recharge_one_commission != 0 &&
          item.p_first_recharge_one_commission != null
        ) {
          txt2 =
            "首充大于" +
            item.p_first_recharge_one +
            "元，佣金" +
            item.p_first_recharge_one_commission +
            "元";
        }
        if (
          item.p_first_recharge_two_commission != 0 &&
          item.p_first_recharge_two_commission != null
        ) {
          txt3 =
            "或者首充大于" +
            item.p_first_recharge_two +
            "元，佣金" +
            item.p_first_recharge_two_commission +
            "元.";
        }
        if (
          item.p_recharge_amount_one_commission != 0 &&
          item.p_recharge_amount_one_commission != null
        ) {
          txt4 =
            "累计充值大于" +
            item.p_recharge_amount_one +
            "元，佣金" +
            item.p_recharge_amount_one_commission +
            "元";
        }
        if (
          item.p_recharge_amount_two_commission != 0 &&
          item.p_recharge_amount_two_commission != null
        ) {
          txt5 =
            "且累计充值大于" +
            item.p_recharge_amount_two +
            "元，佣金" +
            item.p_recharge_amount_two_commission +
            "元";
        }

        this.yjtext = txt0 + txt1 + txt2 + txt3 + txt4 + txt5;
      }
    },
    xiazai: function() {
      let img = document.getElementsByClassName("qrcode")[0].childNodes[1];
      var a = document.createElement("a");
      a.download = "erweima"; //这边是文件名，可以自定义
      a.href = img.src;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    creatQrCode(url) {
      this.erweima_log = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrl.innerHTML = "";
        let url = url;
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 400,
          height: 400,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    sousuo: function() {
      this.search.page = 1;
      this.getlist();
    },
    getlist: function() {
      axios.get("/own/page/list", { params: this.search }).then(response => {
        if (response.data.msg.code == 0) {
          this.list = response.data.data.data;
          this.list.forEach(item => {
            item.selling_point = JSON.parse(item.selling_point);
            console.log(item.selling_point);
          });
          this.total = response.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getlist2: function() {
      axios
        .get("/own/page/list", { params: { status: 100 } })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.total2 = response.data.data.total;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    changestatus: function(item) {
      this.search.status = item;
      this.sousuo();
    },
    changorder: function(item) {
      this.search.order = item;
      this.sousuo();
    },
    fanye: function(val) {
      this.search.page = val;
      this.getlist();
    },
    xuanzhong: function(item) {
      this.dangqianshangpin = item;
    },

    xiugai: function() {
      let all = JSON.parse(JSON.stringify(this.dangqianshangpin));
      console.log("---0000---");
      delete all.commission_rule;
      delete all.settlement_method;
      delete all.settlement_status;
      console.log(all);
      all.selling_point = JSON.stringify(all.selling_point);
      axios.post("/own/page/update", all).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("设置成功");
          this.getlist();
          this.paixu_log = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },

    handleCommand: function(e) {
      console.log(e);
      if (e == "a") {
        this.$router.push(
          "/shangpinguanli/zaishoushangpin/bianjishangpin?id=" +
            this.dangqianshangpin.id
        );
      }
      if (e == "b") {
        this.dangqianshangpin.is_top = moment().unix();
        this.xiugai();
      }
      if (e == "bb") {
        this.dangqianshangpin.is_top = 0;
        this.xiugai();
      }
      if (e == "c") {
        this.dangqianshangpin.is_main = 1;
        this.xiugai();
      }
      if (e == "cc") {
        this.dangqianshangpin.is_main = 0;
        this.xiugai();
      }
      if (e == "d") {
        this.paixu_log = true;
      }
      if (e == "e") {
        this.dangqianshangpin.status = 0;
        this.xiugai();
      }
    },
    //设置佣金
    suresetyj() {
      var obj = {
        id: this.dangqianshangpin.id,
        commission_rule: this.yjtext,
        settlement_method: "",
        settlement_status: "",
        goods_display: this.goods_display
      };

      if (this.radiorg == "" && this.radiozd == "") {
        this.$message.error("请选择结算方式");
        return;
      }

      if (this.radiozd == "1") {
        if (this.jhstate == "") {
          this.$message.error("选择触发状态");
          return;
        }
      }

      if (this.radiorg == "1") {
        obj.settlement_method = "0";
      }
      if (this.radiozd == "1") {
        obj.settlement_method = "1";
      }
      if (this.jhstate == "") {
        obj.settlement_status = "0";
      }
      if (this.jhstate == "1") {
        obj.settlement_status = "1";
      }
      if (this.jhstate == "2") {
        obj.settlement_status = "2";
      }

      console.log(obj);

      axios.post("/own/page/settlement/set", obj).then(response => {
        if (response.data.msg.code == 0) {
          // this.$message.success('设置成功');
          this.dangqianshangpin.status = 100;
          this.isshowmoney = false;
          axios
            .post("/own/page/put-sale", {
              id: this.dangqianshangpin.id,
              status: 100
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success("设置成功");
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //切换佣金方式
    changeradio1() {
      this.radiozd = "";
      this.jhstate = "";
      this.radiorg = "1";
    },
    changeradio2() {
      this.radiorg = "";
      this.radiozd = "1";
    }
  }
};
</script>


<style scoped lang="less">
.gongyingshangshangpin {
  .sxjact {
    background: rgb(0, 90, 255);
    border-radius: 30px;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    color: rgb(255, 255, 255);
    width: 150px;
    height: 60px;
    margin-right: 30px;
  }
  .sxj {
    background: rgb(227, 232, 241);
    border-radius: 30px;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    color: rgb(175, 179, 188);
    width: 150px;
    height: 60px;
    margin-right: 30px;
  }
  .xt {
    margin-right: 10px;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px 10px;
  }
  .lj {
    width: 100px;
    height: 32px;
    color: rgb(64, 66, 71);
    background: rgb(227, 232, 241);
    border-radius: 16px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  .ljact {
    width: 100px;
    height: 32px;
    color: rgb(0, 90, 255);
    background: rgb(228, 237, 255);
    border-radius: 16px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  .bushi3 {
    margin-right: 20px;
  }
}
</style>
<style scoped>
.cancel {
  flex: 1;
  background: #e3e8f1;
  border-radius: 25px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #020c1d;
}
.onOK {
  flex: 1;
  background: #005aff;
  border-radius: 25px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.no-select {
  font-size: 12px;
  font-weight: 400;
  padding: 11px 12px;
  background: #f6f8fb;
  border-radius: 10px;
  color: #787d85;
}
.select {
  font-size: 12px;
  font-weight: 400;
  padding: 11px 12px;
  background: #f6f8fb;
  border-radius: 10px;
  border: 1px solid #2757ff;
  color: #2757ff;
}
.font-title {
  font-size: 14px;
  font-weight: 500;
}

.t_yj_title {
  width: 150px;
}
.t_radio_box {
  width: 200px;
}
.t_flex_w {
  display: flex;
  flex-wrap: wrap;
}
.sortBtn {
  display: flex;
  border-radius: 30px;
  justify-content: center;
  background-color: #e4edff;
  width: 100px;
}
.crice_container {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  background: black;
  line-height: 20px;
  text-align: center;
  margin-top: 2px;
}
.footer_tabs {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
}
.tabs_container {
  display: flex;
  width: 100%;
  height: 44px;
  background: white;
  padding: 0 15px;
}
.wares {
  font-size: 20px;
  color: #020c1d;
  font-weight: bold;
  margin-top: 20px;
  font-family: "PingFang SC";
}
.initial {
  font-size: 17px;
  color: #afb3bc;
  margin-top: 20px;
}
.search_container {
  height: 98.5px;
  background: white;
  width: 100%;
  border-radius: 0 0 20px 20px;
}

.search_img {
  width: 12.7px;
  height: 12.8px;
}
/* /deep/ .el-input__inner {
  padding-left: 40px;
} */
.search_btn {
  background: rgb(0, 90, 255);
  height: 30px;
  width: 64px;
  font-size: 14px !important;
  border-radius: 41px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.clear_img {
  height: 24.61px;
  width: 24.61px;
  margin-left: 15px;
  margin-top: 5px;
}

.term_input::placeholder {
  font-size: 12px;
  color: #909090;
}
.commission_container {
  border-radius: 0 0 20px 20px;
  padding-top: 6px;
  padding-left: 30px;
  color: #787d85;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.commission_rules {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 246px;
}
.commission_interval {
  width: 100%;
  font-size: 12px;
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
  color: #787d85;
  flex-wrap: wrap;
}
.commission_item {
  height: 35px;
  width: 78px;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  background: #f6f8fb;
  line-height: 35px;
  text-align: center;
}
.commission_input {
  width: 78px;
  height: 35px;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  background: #f6f8fb;
  text-align: center;
}
.commission_input::placeholder {
  font-size: 12px;
  color: #909090;
}
.search_box_input {
  display: flex;
  align-items: center;
  width: 90%;
  height: 38px;
  border-radius: 25px;
  padding-left: 12px;
  padding-right: 4px;
  background: #F6F8FB;
  border: 1px solid #E3E8F1;
}
/deep/ .search_box_input .search_input .el-input__inner{
  width: 220px !important;
  height: 34px !important;
  border-radius: 25px;
  border: 0 !important;
  padding-left: 5px;
}
.layout_inner{
  width: 100%;
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}
.jc-between{

}
</style>
